<template>
  <div class="invitation-box">
    <div class="share-img" v-show="showImg">
      <img src alt id="imgcard" />
    </div>
    <div class="invitation-cnt" id="share-box" v-show="!showImg">
      <div class="tips" @click="showTips">
        <span>每邀请一个好友即可赚3元</span>
        <i class="iconfont icon-shouye_tishi"></i>
      </div>
      <div class="qrcode-box">
        <p class="qrcode" id="qrcode"></p>
        <p class="text">长按二维码，立即注册</p>
      </div>
    </div>
    <div class="record">
      查看邀请记录
      <i class="iconfont icon-wode-erjizhe"></i>
    </div>
  </div>
</template>

<script>
import userService from 'SERVICE/userService'
import h2c from 'html2canvas'
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      showImg: false
    }
  },
  created() {},
  methods: {
    showTips() {
      this.$toast('每邀请1位好友，好友完成注册你可得3元收益哟~')
    },
    getqueryInvitationUrl(el) {
      userService
        .getInvitationUrl({
          uuid: localStorage.getItem('uuid'),
          enterpriseId: localStorage.getItem('enterpriseId')
        })
        .then(res => {
          this.goyInvitationUrlCode(el, res.inviteUrl)
        })
        .catch()
    },
    goyInvitationUrlCode(el, url) {
      let qrcode = new QRCode(el, {
        width: 240,
        height: 240, // 高度
        text: url, // 二维码内容
        image: '',
        render: 'table' // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas） // background: '#f0f' // foreground: '#ff0'
      })
    },
    toImg(el) {
      let t = setTimeout(() => {
        if (document.getElementById(el).getElementsByTagName('img')) {
          this.savaReport()
          clearTimeout(t)
        } else {
          this.toImg(el)
        }
      }, 500)
    },
    async savaReport() {
      const dpr = window.devicePixelRatio
      const canvas = await h2c(document.querySelector('#share-box'), {
        logging: false,
        useCORS: true,
        backgroundColor: null
      })
      let imgW = '100%'
      let imgH = '100%'
      let image = document.getElementById('imgcard')
      image.src = canvas.toDataURL('image/png')
      image.style.width = imgW
      image.style.height = imgH
      this.showImg = true
    }
  },
  async mounted() {
    await this.getqueryInvitationUrl('qrcode')
    // this.toImg('share-box')
  }
}
</script>

<style lang="less" scoped>
.invitation-box {
  background: #fe5554;
  font-size: 14px;
  .invitation-cnt {
    background: #fe5554 url('../../../assets/img/wx/invitation.png') no-repeat left top;
    background-size: 100% auto;
    padding-top: 90px;
    padding-bottom: 20px;
    .tips {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      i {
        margin-left: 5px;
      }
    }
    .qrcode-box {
      margin: 140px 20px 0;
      background-color: #fff;
      height: 350px;
      border-radius: 12px;
      padding-top: 40px;
      .qrcode {
        width: 226px;
        height: 226px;
        margin: 0 auto;
        /deep/ img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        color: #40516f;
        margin-top: 18px;
        text-align: center;
      }
    }
  }
  .record {
    text-align: center;
    color: #fff;
    padding-top: 12px;
  }
}
</style>